import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtAvatar, AtBadge, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import './myEyedoctor.scss'
import touxiang from '../../img/touxiang2.png'
import dangan from '../../img/dangan.png'
import right from '../../img/right.png'
import xinfeng from '../../img/xinfeng2.png'
import huihua from '../../img/huihua.png'
import dingdan from '../../img/dingdan.png'
import fukuan from '../../img/fukuan.png'
import kefu from '../../img/kefu.png'   
import shouye from '../../img/shouye3.png'

import app from '../../main.js'

export default class MyEyedoctor extends Component {

    config = {
        navigationBarTitleText: '爱眼医生'
    }
    constructor() {
        super(...arguments)
        this.state = {
            "patientInfo": 
                {
                    "id": "",
                    "name": "",
                    "head_image": "",
                },
                count: 0,
                amount:0,
                isOpenServiceModal:false
        }
    }
    // 健康档案
    handleClick() {
        console.log(123)
        app.navigateTo('../myHealthrecords/myHealthrecords'+'?id='+this.state.patientInfo.id);
    }
    // 我的问诊
    handleClickMyInquisition() {
        app.navigateTo('../myInquisition/myInquisition');
    }
    // 我的医生
    handleClickNyDoctor() {
        app.navigateTo('../myDoctor/myDoctor'+'?id'+this.state.patientInfo.id);
    }
    // 我的订单
    handleClickMyOrders() {
        app.navigateTo('../myOrders/myOrders');
    }
    // 回首页
    backhome() {
        app.redirectTo('../eyeDoctor/eyeDoctor');
    }
    // 我的优惠券
    youhuiquan(){
        app.navigateTo('../myyouhuiquan/myyouhuiquan');
    }

    getData() { 
        let me = this
        let data = {}
        // 患者信息
        app.get('web/patient/getInfoByToken', data, function (res) {
            console.log(res)
            me.setState({
                patientInfo: res.data.result
            })
        })
        //问诊数
        app.get('web/myself/unreadNumber', data, (res)=>{
           if(res.data.result == undefined || res.data.result == null){
               return
           }else{
               me.setState({
                  count:res.data.result
               })
           }
        })
        // 优惠券总数量
        app.get('web/coupon/amount',data,(res)=>{
            me.setState({
                amount:res.data.result.unused
            })
        })
    }
    
    openServiceModal () {
        this.setState({
            isOpenServiceModal:true
        })
    }

    handleServiceModal () {
        this.setState({
            isOpenServiceModal:false
        })
    }

    callPhone (phone) {
        Taro.makePhoneCall({
          phoneNumber: phone
        })
    }
    

    //长按识别二维码
    timer = 0
    gtouchstart () {
        let me = this
        me.timer = setTimeout(function(){
            me.scanCodes()
        },1000)
        return false
    }

    gtouchmove () {
        clearTimeout(this.timer) 
        this.timer = 0
    }

    gtouchend () {
        clearTimeout(this.timer)
        console.log(this.timer)
        if(this.timer != 0){   
            console.log("你这是点击，不是长按");   
        }   
        return false;   
    }
    
    scanCodes () {
        console.log('长按')
        let images = app.getPath('/img/service_qrcode.png')
        app.prviewImage(images,[images])
    }

    componentDidShow() {
        this.getData();
    }

    render() {
        // 主页信息
        let patientInfo = this.state.patientInfo
        return (
            <View>
                {/* 患者信息 */}
                <View className='topTitle'>
                    <View className='leftImage'>
                        <AtAvatar
                            circle
                            image={patientInfo.head_image}
                            size='large'
                        />
                    </View>
                    <View className='rightText'>
                        <View><Text>{patientInfo.name}</Text></View>
                        {/* <View><Text>{this.state.patientInfo.id}</Text></View> */}
                    </View>
                </View>
                {/* list类容区 */}
                <View className='list'>
                    <View className='list-item' onClick={this.handleClick}>
                        <View className='list-icon'>
                            <Image
                                className='list-iconSize'
                                src={dangan}
                            />
                            <View><Text>健康档案</Text></View>
                        </View>
                        <View className='list-text'>
                            <Image
                                className='text-image'
                                src={right}
                            />
                        </View>
                    </View>
                    <View className='list-item' onClick={this.handleClickMyInquisition}>
                        <View className='list-icon'>
                            <Image
                                className='list-iconSize'
                                src={xinfeng}
                            />
                            <View><Text>我的咨询</Text></View>
                        </View>
                        <View className='list-text'>
                            {this.state.count != 0 && this.state.count != null 
                            ? <AtBadge customStyle='margin:0px 15px 5px;' value={this.state.count} maxValue={99} size='normral'></AtBadge>
                            : null }
                            <Image
                                className='text-image'
                                src={right}
                            />
                        </View>
                    </View>
                    <View className='list-item' onClick={this.handleClickNyDoctor}>
                        <View className='list-icon'>
                            <Image
                                className='list-iconSize'
                                src={huihua}
                            />
                            <View><Text>我的医生</Text></View>
                        </View>
                        <View className='list-text'>
                            <Image
                                className='text-image'
                                src={right}
                            />
                        </View>
                    </View>
                    <View className='list-item bottom' onClick={this.handleClickMyOrders}>
                        <View className='list-icon '>
                            <Image
                                className='list-iconSize'
                                src={dingdan}
                            />
                            <View><Text>我的订单</Text></View>
                        </View>
                        <View className='list-text'>
                            <Image
                                className='text-image'
                                src={right}
                            />
                        </View>
                    </View>
                    <View className='list-item' onClick={this.youhuiquan}>
                        <View className='list-icon'>
                            <Image
                                className='list-iconSize'
                                src={fukuan}
                            />
                            <View><Text>我的优惠券</Text></View>
                        </View>
                        <View className='list-text'>
                            <Text style={this.state.amount == 0 || this.state.amount == '' || this.state.amount == undefined ? 'display:none' : 'display:inline-block'}>{this.state.amount} 张</Text>
                            <Image
                                className='text-image'
                                src={right}
                            />
                        </View>
                    </View>
                </View>

                <AtModal isOpened={this.state.isOpenServiceModal}>
                    <AtModalHeader>联系客服</AtModalHeader>
                    <AtModalContent>
                       <View className='sv_first'>
                         <View className='sv_phone_txt'>联系电话：</View>
                         <View className='sv_phone' onClick={this.callPhone.bind(this,'18816836943')}>18816836943</View>
                       </View>
                       <View className='sv_second'>
                         <Image className='sv_qrcode' src={app.getPath('/img/service_qrcode.png')} style='width:300rpx;height:300rpx;'></Image>
                       </View>
                    </AtModalContent>
                    <AtModalAction> <Button onClick={this.handleServiceModal.bind(this)}>取消</Button></AtModalAction>
                </AtModal>

                <View className='list-item2' onClick={this.openServiceModal.bind(this)}>
                    <View className='list-icon'>
                        <Image
                            className='list-iconSize'
                            src={kefu}
                        />
                        <View><Text>联系客服</Text></View>
                    </View>
                    <View className='list-text'>
                        <Image
                            className='text-image'
                            src={right}
                        />
                    </View>
                </View>
                {/* 底部按钮 */}
                <View className='bottonBtn'>
                    <View className="bottonBtntext" onClick={this.backhome}>
                        <View>
                            <Image
                                className="btnImage"
                                src={shouye}
                            />
                        </View>
                        <View>
                            首页
                        </View>
                    </View>
                    <View className='bottonBtntext' >
                        <View>
                            <Image
                                className="btnImage"
                                src={touxiang}
                            />
                        </View>
                        <View>
                            我的
                        </View>
                    </View>
                </View>
                <View className='myMessage'>
                   <Text>{this.state.count > 99 ? '99+' : (this.state.count <= 0 ? '' : this.state.count)}</Text>
                </View>
            </View>
        )
    }
}